

<template>
    <tm-app class="groupHistory" bgImg="f5">
        <!-- <image
            class="psa"
            style="width:750rpx;height:834rpx;top:0;left:0;right:0;z-index:1;"
            src="../../static/bg1.jpg"
            mode=""
        ></image> -->
        <view
            style="background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="slim_header d-flex a-center j-center"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <view class="left_box" @tap="goBack">
                <image src="/static/center/back.png" class="back"></image>
            </view>
            <view class="title d-flex a-center j-between">群历史</view>
            <!-- <view class="right_box" style="color: #333; font-weight: normal">
                说明
            </view> -->
        </view>
        <scroll-view
            :scroll-y="true"
            class="content"
            :style="{ top: `calc(100rpx + ${systemInfo.statusBarHeight}px)` }"
            @scrolltolower="GetGroupHistory(groupId)"
        >
            <view class="history">
                <view class="box psr" v-for="item,index in historyList">
                    <image class="img" :src="getImgSrc(item)" />
                    <view class="title d-flex a-center j-between">
                        <text>
                            <text>{{ typesMap[item.type] }}</text>
                            <text v-if="item.type === 5"
                                >至{{ item.userCount }}人</text
                            ><text class="text_main" v-if="item.type === 6"
                                >¥{{ toYuan(item.amount) }}</text
                            >
                            <text v-if="item.type === 7"
                                >为{{ item.userName }}</text
                            >
                        </text>
                        <text
                            class="text_main"
                            style="font-size: 28rpx"
                            v-if="item.type === 1"
                        >
                            ¥{{ Number(item.amount.split("|")[0]) === 0?'免费':toYuan(item.amount.split("|")[0])}}
                            
                            <!-- /{{
                                item.amount.split("|")[1] == 999
                                    ? `不限`
                                    : `${item.amount.split("|")[1]}个月`
                            }} -->
                        </text>
                    </view>
                    <view
                        v-if="item.type === 1 || item.type === 4|| item.type === 7"
                        class="sub_title d-flex a-center j-between"
                    >
                        <text v-if="item.type === 1 || item.type === 4|| item.type === 7"><text v-if="item.type===1">群名:</text>{{
                            item.name||item.userName    
                        }}<text v-if="item.type === 7">(当前)</text> </text>
                        <text
                            class="c9"
                            style="font-size: 28rpx"
                            v-if="item.type === 1"
                        >
                            (人数上限{{ item.userCount }}人)
                        </text>
                    </view>
                    <view
                        v-if="
                            item.type === 1 ||
                            item.type === 5 ||
                            item.type === 6 ||
                            item.type === 7
                        "
                        class="row d-flex a-center c6"
                    >
                        {{ getDesp(item) }}
                    </view>
                    <view
                        v-if="
                            item.type === 1 ||
                            item.type === 4 ||
                            item.type === 5 ||
                            item.type === 6 ||
                            item.type === 7
                        "
                        class="row d-flex a-center c9"
                        style="margin-top: 20rpx"
                    >
                        <text class="c9" style="font-size: 24rpx">{{
                            formatTime(item.createTime)
                        }}</text>
                        <text class="c9" style="font-size: 24rpx"
                            >({{ fromNow(item.createTime) }})</text
                        >
                    </view>

                    <view
                        style="margin-top: 20rpx"
                        v-if="item.type === 2 || item.type === 3"
                    >
                        <view
                            v-for="obj in item.arr"
                            class="row d-flex a-center j-between"
                        >
                            <text style="font-size: 28rpx"
                                >{{ obj.userName }}
                                <text v-if="item.type === 3"
                                    >(入群{{ obj.joinGroupDay }}天)</text
                                ></text
                            >
                            <text style="font-size: 24rpx" class="c9">{{
                                formatTime(obj.createTime)
                            }}</text>
                        </view>
                    </view>
                    <view v-if="checkMore(item)" class="more w-center c9 d-flex a-center" style="font-size:24rpx;" @tap="showMore(item,index)">
                        更多
                        <i class="tmicon tmicon-angle-down" style="margin-left:5rpx;font-size:15rpx;"></i>
                    </view>
                </view>

                <view class="box" style="border-left:none;" v-if="isEnd">
                    <image class="img" src="/static/history/notice.png"/>
                    <view v-if="isEnd" class="desp c9 psr" style="text-align:center;top:10rpx;font-size:26rpx;">没有更多了</view>
                </view>

            </view>
        </scroll-view>

    </tm-app>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { onReady, onShow, onLoad, onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { getGroupHistory } from "@/api/api";
import { centToYuan } from "@/utils/format";


const toYuan = (num: number) => {
    return centToYuan(num);
};

const groupId = ref("");

const goBack = () => {
    uni.navigateBack();
};

const reqParams = reactive({
    page: 1,
    rows: 10,
    groupId: "",
});

const isEnd = ref(false);
const historyList: any = ref([]);

const formatTime = (timeStr: string) => {
    if (!timeStr) {
        return "";
    }
    const time = timeStr.split(" ")[0];
    if (!time) {
        return "";
    }
    const [year, month, day] = time.split("-");

    return `${year}年${month}月${day}日`;
};

const fromNow = (time) => {
    if (!time) {
        return "--";
    }
    return uni.$tm.u.getDateToNewData(time);
};

let getHistoryLoading = false;

const GetGroupHistory = async (groupId: string) => {
    if(getHistoryLoading){
        return
    }



    getHistoryLoading = true;


    if (isEnd.value) {
        return;
    }
    const res: any = await getGroupHistory(reqParams);

    getHistoryLoading = false;

    const { flag, data } = res;
    console.log("GetGroupHistory");
    console.log(data);
    if (flag !== 1) {
        uni.showToast({
            icon: "none",
            title: "获取群历史失败",
            duration: 1500,
        });
        return;
    }

    data.list.forEach(item=>{
        if(item.type===2||item.type===3){
            if(item.groupHistorys.length>3){
                item.arr=item.groupHistorys.slice(0,3)
            }else{
                item.arr=item.groupHistorys;
            }
        }
    })

    reqParams.page += 1;
    historyList.value.push(...data.list);
    if(data.total<=historyList.value.length){
        isEnd.value = true;
    }
    

};

const systemInfo: any = systemInfoStore();

const getImgSrc = (item: any) => {
    const { type } = item;
    if (type === 1) {
        return "/static/history/create.png";
    }

    if (type === 2 || type === 3) {
        return "/static/history/notice.png";
    }

    return "/static/history/edit.png";
};

const getDesp = (item: any) => {
    const { type } = item;
    if (type === 1) {
        return `${item.userName}是群主`;
    }
    if (type === 5) {
        return `原${item.oldValue}人`;
    }

    if (type === 6) {
        return `原¥${Number(item.oldValue)?item.oldValue:'免费'}`;
    }
    if (type === 7) {
        return `原群主${item.oldValueName}`;
    }

    return "徐哈哈是群主";
};

const typesMap: any = ref({
    1: "创建群",
    2: "胖友加入",
    3: "胖友退群",
    4: "修改群名",
    5: "修改群上限人数",
    6: "修改入群费用",
    7: "群主变更",
});

const showMore = (item,index)=>{
    historyList.value[index].arr = historyList.value[index].groupHistorys;
}

const checkMore = (item)=>{


    if(item.groupHistorys&&item.groupHistorys?.length&&item.groupHistorys.length>item.arr.length){
        return true;
    }

    return false;

}

onReady(() => {});

onLoad((option: any) => {
    if (option.groupID) {
        reqParams.groupId = option.groupID;
        groupId.value = option.groupID;
        GetGroupHistory(option.groupID);
    }
});

onUnload(() => {});

onShow(() => {});
</script>

<style lang="scss" scoped>
.groupHistory {
    .content {
        position: absolute;
        width: 750rpx;
        left: 0;
        right: 0;
        padding: 20rpx 0;
        bottom: constant(safe-area-inset-bottom);
        bottom: env(safe-area-inset-bottom);
        .notice {
            background: #f5f5f5;
            padding: 20rpx;
            border-radius: 20rpx;
        }
    }

    .history {
        width: 710rpx;
        padding: 20rpx;
        border-radius: 20rpx;
        margin: 0 auto;
        margin-top: 20rpx;
        background: #fff;
        .box {
            position: relative;
            width: 660rpx;
            margin-left: 20rpx;
            border-left: 1px solid #eee;
            padding-left: 40rpx;
            padding-right: 20rpx;
            padding-bottom: 50rpx;
            .img {
                position: absolute;
                width: 60rpx;
                height: 60rpx;
                left: -30rpx;
            }
            .title {
                font-size: 32rpx;
                color: $slim-text3;
                font-weight: 600;
                height: 60rpx;
            }
            .sub_title {
                font-size: 32rpx;
                color: $slim-text3;
                height: 60rpx;
            }

            .row {
                font-size: 28rpx;
                color: #666;
                height: 50rpx;
            }
        }
    }
}
</style>
